<template>
  <div id="container" tabindex="0"></div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'
import { onMounted, onUnmounted } from 'vue'

let map = null
let zoom = null
let center = null
window._AMapSecurityConfig = {
  securityJsCode: 'b86122b3e929835b077b9fb2e9380739',
}
onMounted(() => {
  // JS API加载器，可多次调用加载器
  AMapLoader.load({
    key: 'cc1ae41a8dd961d6129825a8ac26d591',
    version: '2.0',
    plugins: [],
  })
    .then((AMap) => {
      AMap.plugin(
        //肯定是单数
        ['AMap.DistrictSearch', 'AMap.TileLayer', 'AMap.Marker', 'AMap.Polyline'],
        function () {
          //
          var opts = {
            subdistrict: 0,
            extensions: 'all',
            level: 'city',
          }
          var district = new AMap.DistrictSearch(opts)
          // 查找指定，查找指定城市的区域并返回结果
          district.search('广州市', function (status, result) {
            var bounds = result.districtList[0].boundaries // 一维数组
            var mask = []
            for (var i = 0; i < bounds.length; i++) {
              mask.push([bounds[i]]) //转成二维数组 push方法加到数组里
            }
            var map = new AMap.Map('container', {
              mask: mask, //掩膜
              center: [113.472804, 22.995725],
              viewMode: '3D',
              showLabel: false,
              labelzIndex: 130,
              pitch: 20, //俯仰角
              zoom: 12,
              layers: [
                new AMap.TileLayer.RoadNet({
                  //网络图层
                  // rejectMapMask: true
                }),
                new AMap.TileLayer.Satellite(), //卫星地图图层
              ],
            })
            //边界线
            for (var i = 0; i < bounds.length; i++) {
              new AMap.Polyline({
                path: bounds[i],
                strokeColor: '#99ffff',
                strokeWeight: 4,
                map: map,
              })
            }
            var maskIn = new AMap.Marker({
              position: [113.501415, 22.926055],
              map: map,
            })
            var maskOut = new AMap.Marker({
              //区域外不显示
              position: [113.001415, 22.926055],
              map: map,
            })
          })
        },
      )
    })
    .catch((e) => {
      console.log(e)
    })
})
onUnmounted(() => {
  map?.destory()
})
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
#container {
  width: 90%;
  margin: 0 auto;
  height: 706px;
}
.input-card {
  width: 24rem;
}
</style>
